<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 预定义样式 -->
    <style>
      .red {
        color:red;
      }
      .blue {
        color:blue;
      }
      .font {
          font-size: 20px;
          font-weight: bold;
      }
    </style>
</head>
<body>
  <div id="app">
      <!--
        这里会动态绑定样式
        这里把绑定值设置为一个对象，就会产生一种新语法规则，设置的对象中可以指定对应的class样式是否被选用
        如下：当isBlue为true时，blue样式被选用，isRed为true时，red样式被选用
       -->
      <div :class="{blue:isBlue,red:isRed}">
          你好
      </div>

      <!-- 直接绑定样式对象 -->
      <div :class="style">
          hello
      </div>

      <!-- 数组中的样式表都会被添加 -->
      <div :class="[redClass,fontClass]">
          hello
      </div>
      <hr>
      <div :style="{color:textColor,fontSize:textFont}">
          内联样式
      </div>
  </div>

<script>
  const {createApp,ref} = Vue
  const config = {
      setup() {
          const isBlue = ref(true)
          const isRed = ref(false)
          /* 指定样式对象 */
          const style = ref({
              blue:true,
              red:false
          })

          const redClass = ref('red')
          const fontClass = ref('font')

          /* 定义内联样式的值 */
          const textColor = ref('green')
          const textFont = ref("20px")

          return {isBlue,isRed,style,redClass,fontClass,textColor,textFont}
      }
  }
  createApp(config).mount('#app')
</script>
</body>
</html>